<template>
  <!-- 用车申请 -->
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData ref="searchData" :searchData="searchArr" @search="search"></searchData>
    <!-- 表格 -->
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      
      <!-- 表格 -->
      <list-table
        ref="table"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :loading="loading"
        :alert="true"
        show-size-changer
        show-quick-jumper
      >
        <a-button slot="prefix" class="mb12" icon="plus" type="primary" @click="handleManage(2)">用车申请</a-button>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
        <template slot="action" slot-scope="text, record">
          <MoreButton>
          <a @click="handleManage(0, record)">查看</a>
          <template v-if="record.isOperation">
            <!-- 编辑 -->
            <template v-if="record.status == '0' || record.status == '3'">
              <a @click="handleManage(1, record)">编辑</a>
            </template>
            <!-- 删除 -->
            <template v-if="record.status == '0'">
              <a class="del_btn" @click="handleRemove(record.id)">删除</a>
            </template>
          </template>
          <!-- 当状态为审批中 -->
          <template v-if="record.status != '0'">
            <a @click="$bus.$emit('showApprovalDetailsDialog', record.id)">审批信息</a>
          </template>
          </MoreButton>
        </template>
        <!-- 状态 -->
        <template slot="status" slot-scope="text, record">
          <status-display :statusCode="record.status" isApproval></status-display>
        </template>
      </list-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
// import { STable } from '@/components' // 表格
import { carApplication } from '@/api/office/vehicle/config' // api
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import StatusDisplay from '@/components/StatusDisplay'
import OrgTreeSelect from '@/components/OrgTreeSelect'
import BasePage from '@/views/basePage' // 基础配置

const searchArr = [
  // 搜索框
  {
    name: '申请单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
    attr: {
      isAutoSelectFirst: true
    }
  },
  // {
  //   name: '申请单位',
  //   valueKey: 'unitId',
  //   type: SelectCompanyAndProject
  // },
  {
    name: '用车日期',
    type: 'date',
    value: 'useCarTime'
    // attr: {
    //   rangeFormat: ['goTime', 'endDate'],
    // },
  }
]
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    scopedSlots: { customRender: 'index' }
  },
  {
    title: '申请单位',
    ellipsis: true,
    dataIndex: 'unitName'
  },
  {
    title: '申请部门',
    ellipsis: true,
    dataIndex: 'departmentName'
  },
  {
    title: '目的地',
    ellipsis: true,
    dataIndex: 'address'
  },
  {
    title: '往返时间',
    dataIndex: 'time',
    width: 290,
    customRender() {
      return arguments[1].goTime && arguments[1].comeTime ? arguments[1].goTime + '至' + arguments[1].comeTime : ''
    }
  },
  {
    title: '用车人数',
    ellipsis: true,
    dataIndex: 'usePersonNum'
  },
  {
    title: '车型要求',
    ellipsis: true,
    dataIndex: 'requirement'
  },
  {
    title: '事由',
    ellipsis: true,
    dataIndex: 'subjectMatter'
  },
  {
    title: '申请时间',
    ellipsis: true,
    dataIndex: 'createTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    // fixed: 'right',
    // align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '230px',
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name:'a'+Date.now(),
  extends: new BasePage(),
  components: {
    // STable,
    StatusDisplay
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      loading: false,
      queryParam: {}, // 查询参数
      loadData: (parameter) => {
        if (!this.init) {
          return false
        }
        this.loading = true
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return carApplication.getList(requestParameters).then((res) => {
          this.loading = false
          return res
        }).catch(() => {
          this.loading = false
        })
      }, // 加载数据方法 必须为 Promise 对象
      init: false,
      removeApi: carApplication // api
    }
  },
  mounted() {
    this.$refs.searchData.form.setFieldsValue({
      // unitId: this.$currentPost()?.id,
      // searchQuery: {
      //   _checked: this.$currentPost()?.id
      // }
    })
    this.init = true
    this.search({
      // unitId: this.$currentPost()?.id,
      // searchQuery: {
      //   _checked: this.$currentPost()?.id
      // }
    })
  },
  methods: {
    /**
     * 搜索
     */
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    /**
     * 操作栏
     */
    handleManage(type, record) {
      let query = {
        editModel: type
      }
      if (record && record.id) {
        query.id = record.id
      }
      this.$router.push({
        name: '/vehicle/carApplicationEdit',
        query
      })
    }
  }
}
</script>
